Previous Next Contents Generated Index Doc Set



CHAPTER 7 : Swing Component Set


Introduction

JFC (Java Foundation Classes), compatible with the JDK, includes the Swing components. For more detailed information on JFC and what it includes, try the following website:

http://www.javasoft.com/products/jfc

The Swing component set is a graphical user-interface (GUI) toolkit which allows you to design your graphical side of your application in such a way that it has the "look and feel" of the computer on which it is running without modification.

For example, when you create a user interface with Swing and run it under Windows, it has the appearance and behavior of a program written specifically for Windows. When you run the same program on a UNIX workstation, it runs just like any program written for UNIX. Equally, when you run it on an Apple Macintosh, it looks and behaves just like any program written specifically for the Mac. This "pluggable look and feel (plaf)" is possible because Swing components do not use any native code.

The Swing component set extends the AWT, but does not replace it. Swing components are called lightweight because they do not use any platform-specific implementations, such as the "peers" in AWT.


AWT to Swing Conversion

Using its SwingBridgeTM technology, Visaj offers you fast, automatic conversion of your AWT designs to Swing. Simply select "Swing" from the "Translate" pullright menu in the File menu. Your converted design is loaded into a new window and can be used in exactly the same way as any other design in Visaj.

In order to use SwingBridge, you must make sure that Swing is in your CLASSPATH before starting Visaj. For details on how to do this, see the following section, Loading Swing Components.


Loading Swing Components

If you are using a JDK earlier than Java 2 (or JDK 1.2), there are two steps to follow in order to use the Swing components in Visaj. JFC is included in Java 2, so you do not need to set your CLASSPATH first - just follow the second step:

  1. Make sure the Swing jar file is in your CLASSPATH:
CLASSPATH=/swing/swingall.jar
set CLASSPATH=c:\swing\swingall.jar;%CLASSPATH%
or by running from the Start menu:

"Start->Settings->Control Panel->System"
and then clicking on the Environment Tab.

Remember that you do not need this step if you are using Java 2.


Note - On Windows, you may need to reboot your machine to allow the modified environment to be used.
  2. Run Visaj with the -swing argument:
Visaj -swing
  When you start Visaj in this way, your palette does not contain the AWT components. If you wish to use them, load in the palette file AWT.palette in $VISAJ/palettes (where $VISAJ is your Visaj install directory).

If you wish to start Visaj in the usual way, without specifying "-swing", run Visaj after having set your CLASSPATH and do the following:

  1. Select "Merge palette file..." from the Palette menu.
  This displays a File Selection dialog prompting you for the name and location of the palette file.
  2. From $VISAJ/palettes (where $VISAJ is your Visaj install directory), select the palette appropriate to the version of Swing you are using.
  The possible palettes are:
  JFC10.palette - for Swing 1.0.3
  JFC11.palette - for versions of Swing earlier than 1.1 beta 3
  JFC12.palette - for Swing 1.1 beta 3 and later

The Swing components appear on your palette, as shown in Figure 7-1.

Figure  7-1 Swing Components on Visaj Palette

Problems Loading Swing

If you try to merge in a palette containing Swing components and you have not set your CLASSPATH, the error dialog shown in Figure 7-2 is displayed. In this case, exit Visaj, set your CLASSPATH and try again.

Figure  7-2 Error on Merging Swing

If you try to load the Swing jar file by choosing "Load jar file..." from the Palette menu, an informative dialog is displayed. This describes clearly what you should do.

Converting to New Package Names

Visaj provides a simple means of converting existing designs that use the older com.sun.java.swing package to designs that use the javax.swing packages. To do this, start Visaj with the following flag:

-Dvj.convertPackages=true

Any .vcl files then loaded are automatically converted to use whichever version of the Swing component set is available.


Using Swing

Once you have loaded the Swing component set into Visaj, they are selectable from the palette in exactly the same way as the AWT component set.

For general information on using components in Visaj, see the appropriate chapter in this user's guide. This chapter specifically covers the use of Swing components in Visaj. This includes coverage of the following points:

  1. Adding Swing Components to a Design. This describes the slightly different behavior you can encounter when adding Swing components in Visaj.
  2. Highlighting of Non-Opaque Components. This describes the way the highlighting of components is affected by the "opaque" resource.
  3. Swing Tips. The sub-sections here cover Swing components which need more information for their use in Visaj.


Adding Swing Components to a Design

Swing components are added to your design in exactly the same way as any other components. Some Swing components are made up of a collection of objects. Visaj gives you access to all the constituent parts and lets you choose whether or not you wish to view them. By default, they are not shown. JFrame is a Swing component with composite objects. When this is added to your design, the hierarchy shown in Figure 7-3 appears.

These extra components are not added by Visaj, they are an integral part of the Swing component.

To add children to the JFrame, you can select the JFrame component at the top of the hierarchy. Children are added to the appropriate widget, which is usually the contentPane. Menubars are added to the LayeredPane. You can, of course, select the appropriate pane directly.

Figure  7-3 Hierarchy of Components Making up JFrame

Showing and Hiding Extra Children

Show and hide the "extra" components by selecting one of the following toggles from the View menu:

  1. Collapse all composite components
  2. Collapse/Expand selected composites

The first option switches the visibility of composite components in your design. The second option affects only selected components.

These options only change the view and allow you more space for your design. This has no affect on the generated code.

Other Composite Components

The following components also add children automatically:

  1. JScrollPane
  2. JRootPane
  3. JInternalFrame
  4. JDialog
  5. JWindow
  6. JApplet

You can mix Swing components with other components in the same design.


Highlighting of Non-Opaque Components

Those Swing components derived from JComponent which have their "opaque" resource set to "false", are not highlighted in the dynamic display when they are selected in the design area. This is because non-opaque components become invisible when they are highlighted. Components which are non-opaque by default include:

  1. JLabel
  2. JCheckBox
  3. JRadioButton


Swing Tips

Some of the more versatile Swing classes require additional information for their use in Visaj. The rest of this chapter covers this information - the Editor provided for BoxLayout, the customizers supplied for JList and JTable and how to use Borders and ButtonGroup in your design. A more general hints section is included at the end of this chapter.

BoxLayout

Swing provides a new layout component, the BoxLayout. This is assigned automatically to components such as JToolBar. In order to set the BoxLayout for other components in Visaj, use the Box component, available on the object palette in the "JFC Containers" section. Box is a component with a BoxLayout plus additional methods for using the layout. See your JFC documentation for a more detailed description of Box.

Box Layout Editor

To display the Box Layout Editor, press the Layout Editor toolbar button when a container with a BoxLayout is selected. More detail on Layout Editors in general is given in the Layout Editors section on page 69.

BoxLayout, shown in Figure 7-4, lays out its children either horizontally or vertically in a single line. Change the orientation by selecting from the option menu on the left. The change is immediately reflected in the dynamic display.

Figure  7-4 Box Layout Editor

The components controlled by this layout manager are shown on the left of the window. The area on the right contains:

  1. The orientation option menu.
  2. A panel of invisible components which help to control the layout.
  3. A set of text boxes for editing the dimensions of the invisible layout components.

Table 1 on page 97 lists the invisible components and explains what they do.



Invisible Layout Components in Box Layout Editor

Icon

Invisible Component Name

Horizontal glue. This provides a stretchable horizontal space between components.

Vertical glue. This provides a stretchable vertical space between components.

Horizontal strut. This gives you a fixed amount of horizontal space between components.

Vertical strut. This gives you a fixed amount of vertical space between components.

Rigid area. This is an invisible component which gives you a fixed amount of horizontal and vertical space between components.

To add an invisible component, select a component in the area on the left of the Layout Editor (this can be a visible or invisible component) and then press the invisible component button on the right. The invisible component is added before the selection. The component is also added to the containment hierarchy.

To cut or delete an invisible component, go to the containment hierarchy, select it and choose cut or delete as you would for any other component.

The area beneath the invisible component buttons on the right of the Layout Editor allow you to change the minimum, maximum and preferred sizes of the selected invisible component once it has been added to the BoxLayout. The preferred size is the size used when the container is displayed. The maximum and minimum sizes affect what happens when the container is resized.

Remember to press the "Apply" button if you change the sizes. The changes do not take effect and may be lost unless the "Apply" button is pressed.

JList

To populate a JList component, select the JList and choose "Customize..." from the Object menu. The dialog displayed in Figure 7-5 is displayed.

Figure  7-5 List Customizer

Type each string to be added to the list into the text field at the bottom of the dialog and press Return (or the "Add" button) to add them to the list. To change a list item, select it, change the string in the text field and press "Change". To remove an item, select it and press "Remove".

JTable

To fill in a JTable, use the JTable Customizer. Select the JTable and choose "Customize..." from the Object menu. The dialog shown in Figure 7-6 is displayed. This dialog has a column editor at the top and a graphical representation of the table underneath. The column editor allows you to change the column heading, specify the data type of each column and select whether the column can be resized or not. When you type a string into the column title field, it is not shown in the JTable until you press Return.

Figure  7-6 Table Customizer

To add a column to the JTable, press the "Add" button at the top of the dialog. To add a row, press the "Add" button at the side. Similarly, the "Insert" button inserts a row or column before the current selection in the graphical representation. "Delete" removes the selected row or column from the JTable.

Borders

Borders are Swing components which put a visible "edge" around a component. Any Swing component derived from JComponent has a "border" property, as shown in Figure 7-7.

Figure  7-7 Border Property

This property refers to an instance of the type of Border required. By default, it is Null (no border).

The property editor for Borders is an option menu of the different Border classes available. When you select a Border, the "Properties..." button is enabled. Pressing this displays a Border Editor which allows you to change the properties of the selected Border.

The following Borders are available:

  1. BevelBorder. Use the editor to change the colors of the highlight and the shadow and to specify whether the border is raised or lowered.
  2. SoftBevelBorder. The editor for this border is identical to the one above.
  3. EmptyBorder. The editor allows you to edit the insets for this border.
  4. MatteBorder. Use the editor to edit the insets, change the color and the image used for the border.
  5. EtchedBorder. The editor for this border allows you to specify whether it is raised or lowered and to change the color of the highlight and shadow.
  6. LineBorder. Use the editor to alter the thickness and color of the line used for this border.
  7. TitledBorder. The editor for this border allows you to type in the text of the title, to specify the position of the title, the font to use and the color of the border.

After you have edited the properties of a Border in the Border Editor, press the "apply" button in the bottom left hand corner of the Editor. The properties are not set until you do so.

As with all properties in the property sheet, you can also choose to specify the variable name of an existing Border or type in a code expression to set a component's border property.

ButtonGroup

To add a ButtonGroup to your design, make sure that nothing is selected in the object hierarchy and select the ButtonGroup from the object palette. The palette icon is shown in Figure 7-8.

Figure  7-8 ButtonGroup Palette Icon

Specify which buttons belong to the ButtonGroup by adding the lines highlighted in the following piece of code. This code was generated from a simple design comprising a JFrame containing two JCheckBoxes and a separate ButtonGroup, as shown in Figure 7-9.

The location of the added code is important because of the need to retain this code when regenerating from Visaj. The code has been added after a "//vj-" line. For more information on safely adding code, see the Editing the Code section on page 154.

//vj+ <VJ-BeginMethodDef>
    // Method# 1
    public  MyClass()  {
    //vj- <VJ-BeginMethodDef>




        //vj= <VJ-MethodCode>
        //vj+ <VJ-DefineAWTMembers>
        buttonGroup1 = new ButtonGroup();
        JFrame1 = new JFrame();
        JFrame1.setTitle( "JFrame1" );
        JRootPane1 = JFrame1.getRootPane();
        glassPane1 = (JPanel)JRootPane1.getGlassPane();
        JLayeredPane1 = JRootPane1.getLayeredPane();
        contentPane1 = (JPanel)JRootPane1.getContentPane();
        JCheckBox1 = new JCheckBox();
        JCheckBox1.setText( "JCheckBox1" );
        JCheckBox2 = new JCheckBox();
        JCheckBox2.setText( "JCheckBox2" );
        {
            String strConstraint;
            strConstraint = "Center";
            contentPane1.add(JCheckBox1, strConstraint, -1);
            strConstraint = "North";
            contentPane1.add(JCheckBox2, strConstraint, -1);
        }
        JFrame1.pack();
        JFrame1.show();
        //vj- <VJ-DefineAWTMembers>
Add these lines:
		buttonGroup1.add(JCheckBox1);
		buttonGroup1.add(JCheckBox2);
		buttonGroup1.setSelected(JCheckBox2.getModel(), true );
        
        //vj+ <VJ-EndAWT>
        //vj- <VJ-EndAWT>




        //vj+ <VJ-EventListenerClass>
        //vj- <VJ-EventListenerClass>




        //vj+ <VJ-AddEventListeners>
        //vj- <VJ-AddEventListeners>




        //vj= <VJ-Classes>




    //vj+ <VJ-EndMethodDef>  
    }
    //vj- <VJ-EndMethodDef>  

Figure  7-9 Simple Design for Code Example

JApplet

You can make your class into an instance of JApplet by setting the superclass to javax.swing.JApplet. The Editing Properties of the Class section on page 40 tells you how to change the superclass of your class. As soon as you change the superclass and press "Apply", the "this" icon on the object palette changes to the JApplet icon. Selecting "this" from the palette allows you to add objects to your applet class.

Miscellaneous Component Tips

The following components each require some further explanation.

JSplitPane

When a JSplitPane is added to your design, the dynamic display appears to contain two buttons - one on the left and one on the right (as shown in Figure 7-10). These cannot be accessed and are only present as place holders. Any components added as children of JSplitPane replace the buttons.

Figure  7-10 JSplitPane Dynamic Display

JDesktopPane

JDestopPane has a default width and height of 0. To prevent this container from "collapsing", set a preferred width and height in the component's property panel.

JTabbedPane

Add tabs to the JTabbedPane simply by adding children to it - each child is one tab. A tab activation button appears for each child component. Change the name of the tab and its icon in the property sheet of the child component. Adding a container as a tabbed panel allows you to put any number of components on one tab. Change the orientation of the tabs in the property sheet of the JTabbedPane.

JLayeredPane

To set the layer number of each child of a JLayeredPane, set it in the property sheet of the child.




Previous Next Contents Generated Index Doc Set

Copyright © 1998, 1999 Pacific Imperial Inc., TakeFive Software Inc. All Rights Reserved.